import * as THREE from 'three'
//调用轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js'

//定义变量存储场景、摄像机、渲染器、轨道控制器等对象
let scene, camera, renderer, controls
//实例化性能监视器
let stats = new Stats()
//3、设置监视器面板类型(0每秒刷新帧数 1每帧用时 2内存占用)
stats.setMode(0)
// 导出初始化 3d 场景和内容的函数
export const init3d = () => {
  //获取要渲染和盒子
  const dom = document.querySelector('#three_3d')
  //实例化场景: 放置物体的容器世界
  scene = new THREE.Scene()
  //设置场景世界背景色
  scene.background = new THREE.Color(0x0f151e)
  //实例化摄像机：类似人眼，决定看到多大范围空间
  //PerspectiveCamera 透视摄像机(模拟人眼感觉-近大远小)
  //解释：角度：0~360°，弧度：0~2Π
  //参数1：视野角度，角度越小(物体越大)，角度越大(物体越小) --官方文档推荐75°垂直角度比较切近现实
  //参数2：宽高比(和画布的宽高比有重度关系) 画布宽高比 = 摄像机宽高比(保证绘制出来的物体1比1正好的)
  //参数3：近截面距离(距离摄像机的位置)
  //参数4：远截面距离
  //在截面以外的物体是不会被渲染的
  // 4个参数决定了摄像机能看到多大范围内的物体
  camera = new THREE.PerspectiveCamera(75, dom.innerWidth / dom.innerHeight, 0.1, 1000);
  //设置位置
  camera.position.set(10, 10, 10)
  //实例化渲染器
  //antialias: true 抗锯齿处理(让渲染的图形更加光滑)
  renderer = new THREE.WebGLRenderer({ antialias: true });
  //设置场景宽高
  renderer.setSize(window.innerWidth, window.innerHeight)
  //renderer.domElement拿到canvas原生标签,添加到div的dom上
  dom.appendChild(renderer.domElement);

  //性能检测器还是加载到body（浏览器左上角）
  document.body.appendChild(stats.domElement)

  //实例化轨道控制器
  controls = new OrbitControls(camera, renderer.domElement)
  //疏漏属性 阻尼效果：（缓慢停止转动）
  controls.enableDamping = true
  //阻尼的系数(缓慢的速度)
  controls.dampingFactor = 0.125
  //渲染循环，不断的更新=渲染最新画面
  function renderLoop () {
    renderer.render(scene, camera)
    stats.update()
    requestAnimationFrame(renderLoop)
  }
  renderLoop()
}
